(function() {

this.pasta = this.pasta || {};
this.pasta.webgui = this.pasta.webgui || {};

this.pasta.webgui.Button = pasta.webgui.Control.extend(
{
	init : function() 
	{
		this._super();
		
		this.caption = "";
		this.canvas.style.overflow = "hidden";
		
		this.leftBg = document.createElement("div");
		this.leftBg.id = this.cid + "_leftBg";
		this.leftBg.style.position = "absolute";
		this.leftBg.style.left = "0px";
		this.leftBg.style.top = "0px";
		this.leftBg.style.width = "6px";
		this.leftBg.style.height = "36px";
		this.leftBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/left.png)";
		this.leftBg.style.backgroundPosition = "left top";
		this.canvas.appendChild(this.leftBg);
		
		this.rightBg = document.createElement("div");
		this.rightBg.id = this.cid + "_rightBg";
		this.rightBg.style.position = "absolute";
		this.rightBg.style.left = (this.width - 6) + "px";
		this.rightBg.style.top = "0px";
		this.rightBg.style.width = "6px";
		this.rightBg.style.height = "36px";
		this.rightBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/right.png)";
		this.rightBg.style.backgroundPosition = "left top";
		this.canvas.appendChild(this.rightBg);
		
		this.middleBg = document.createElement("div");
		this.middleBg.id = this.cid + "_middleBg";
		this.middleBg.style.position = "absolute";
		this.middleBg.style.left = "6px";
		this.middleBg.style.top = "0px";
		this.middleBg.style.width = (this.width - 12) + "px";
		this.middleBg.style.height = "36px";
		this.middleBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/middle.png)";
		this.middleBg.style.backgroundPosition = "left top";
		this.canvas.appendChild(this.middleBg);
		
		this.title = document.createElement("div");
		this.title.id = this.cid + "_titleFrame";
		this.title.style.position = "absolute";
		this.title.style.left = "0px";
		this.title.style.top = "7px";
		this.title.style.width = "100%";
		this.title.style.height = "100%";
		this.title.style.textAlign = "center";
		this.title.innerHTML = this.caption;
		this.title.style.cursor = "pointer";
		this.canvas.appendChild(this.title);
		
		this.font = new pasta.util.Font();
		this.font.getOnChange().setHandler(this, this.fontChange);
		this.font.setSize(13);
		this.font.setBold(true);
		
		this.iconCanvas = null;
		this.setButtonMode(true);
		
		this.iconWidth = 24;
		
		this.setHeight(36);
	},
	
	//------------------ Event Handler -----------------
	
	fontChange : function()
	{
		this.font.applyFont(this.title);
	},
	
	doClick : function()
	{
		this.leftBg.style.backgroundPosition = "left bottom";
		this.rightBg.style.backgroundPosition = "left bottom";
		this.middleBg.style.backgroundPosition = "left bottom";
		
		this._super();
		
		this.leftBg.style.backgroundPosition = "left top";
		this.rightBg.style.backgroundPosition = "left top";
		this.middleBg.style.backgroundPosition = "left top";
	},
	
	doMouseOver : function()
	{
		this.leftBg.style.backgroundPosition = "left center";
		this.rightBg.style.backgroundPosition = "left center";
		this.middleBg.style.backgroundPosition = "left center";
		
		this._super();
	},
	
	doMouseOut : function()
	{
		this.leftBg.style.backgroundPosition = "left top";
		this.rightBg.style.backgroundPosition = "left top";
		this.middleBg.style.backgroundPosition = "left top";
		
		this._super();
	},
	
	doMouseDown : function(x, y)
	{
		this.leftBg.style.backgroundPosition = "left bottom";
		this.rightBg.style.backgroundPosition = "left bottom";
		this.middleBg.style.backgroundPosition = "left bottom";
		
		this._super(x, y);
	},
	
	doMouseUp : function(x, y)
	{
		this.leftBg.style.backgroundPosition = "left top";
		this.rightBg.style.backgroundPosition = "left top";
		this.middleBg.style.backgroundPosition = "left top";
		
		this._super(x, y);
	},
	
	//------------------ Setter & Getter -----------------
	
	setMode : function(data)
	{
		if ((data == null) || (data == "default"))
		{
			this.leftBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/left.png)";
			this.rightBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/right.png)";
			this.middleBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/middle.png)";
		}
		else
		{
			this.leftBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/" + data + "/left.png)";
			this.rightBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/" + data + "/right.png)";
			this.middleBg.style.backgroundImage = "url(" + this.libDir + "/img/control/button/" + data + "/middle.png)";
		}
	},
	
	getCaption : function()
	{
		return this.caption;
	},
	
	setCaption : function(data)
	{
		this.caption = data;
		this.title.innerHTML = "<b id='" + this.cid + "_title'>" + this.caption + "</b>";
	},
	
	setIconWidth : function(data)
	{
		this.iconWidth = data;
	},
	
	setIcon : function(data)
	{
		if (data != null)
		{
			if (this.iconCanvas == null)
			{
				this.iconCanvas = document.createElement("div");
				this.iconCanvas.id = this.cid + "_icon";
				this.iconCanvas.style.position = "absolute";
				this.iconCanvas.style.left = ((36 - this.iconWidth) / 2) + "px";
				this.iconCanvas.style.top = (((36 - this.iconWidth) / 2) - 1) + "px";
				this.iconCanvas.style.width = this.iconWidth + "px";
				this.iconCanvas.style.height = this.iconWidth + "px";
				this.iconCanvas.style.backgroundPosition = "center";
				this.iconCanvas.style.backgroundRepeat = "no-repeat";
				this.canvas.appendChild(this.iconCanvas);
			}
			
			this.iconCanvas.style.backgroundImage = "url(" + data + ")";
			
			this.title.style.left = "35px";
			this.title.style.textAlign = "left";
		}
		else
		{
			this.iconCanvas.style.backgroundImage = "";
			this.title.style.left = "0px";
		}
	},
	
	setWidth : function(data)
	{
		this._super(data);
		
		this.rightBg.style.left = (this.width - 6) + "px";
		this.middleBg.style.width = (this.width - 12) + "px";
	}
});

})();